<template>
	<view class="comAll" hover-class="comAllHover">
		<view class="left">
			<view class="leftImg">
				<image :src="iconPath" mode="aspectFit"></image>
			</view>
			<view class="leftTitle">
				<text>
					{{title}}
				</text>
			</view>
		</view>
		<view class="right">
			<view class="rightText" v-if="messNum">{{messNum}}</view>
			<image :src="arrowIcon" mode="aspectFill" class="rightImg"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			iconPath: String,
			title: String,
			messNum: Number
		},
		data(){
			return {
				arrowIcon:require('../../static/message/rightArrow.png')
			}
		}
	}
</script>

<style scoped>
	.comAll{
		padding: 17upx;
		border-radius: 10upx;
		background-color: #FFF;
		box-shadow: 0 0 30upx -15upx #f03d3d;
		display: flex;
		height:80upx;
	}
	.comAllHover{
		background-color: #f2e6e6 !important;
	}
	.left{
		width: 50%;
		float: left;
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		margin:  auto 0;
	}
	.leftImg{
		display: flex;
	}
	.leftImg image{
		height:40upx;
		width:44upx;
		margin: auto 0;
	}
	.leftTitle{
		font-size: 24upx;
		color:#333333;
		font-weight: 300;
		padding-left: 25upx;
		display: flex;
	}
	.leftTitle text{
		margin: auto 0;
	}
	.right{
		width: 50%;
		float: right;
		display: flex;
		justify-content: flex-end;
		flex-wrap: nowrap;
		margin:  auto 0;
	}
	.rightText{
		width:32upx;
		height:32upx;
		background-color: #f7533e;
		color:#ffffff;
		font-size:24upx;
		border-radius: 50%;
		text-align: center;
		margin-right: 25upx;
	}
	.rightImg{
		height:25.33upx;
		width:12.66upx;
		margin: auto 0;
	}
</style>
